<template>
	<nt-container>
		<view class="apply">
			<image src="/static/image/apply.png" mode="widthFix" class="apply-bg"></image>
			<view class="apply-body">
				<view class="apply-body__step">
					<view class="apply-body__step--item">
						<view class="apply-body__step--line" :class="{ active: formData.status == 0 }"></view>
						<view class="apply-body__step--circle active"></view>
						提交申请
					</view>
					<view class="apply-body__step--item">
						<view class="apply-body__step--line" :class="{ active: formData.status == 1 }"></view>
						<view class="apply-body__step--circle" :class="{ active: formData.status == 0 }"></view>
						审核中
					</view>
					<view class="apply-body__step--item">
						<view class="apply-body__step--circle" :class="{ active: formData.status == 1 }"></view>
						审核完成
					</view>
				</view>
				<view class="apply-body__form">
					<view class="disabled" v-if="formData.status == 0"></view>
					<view class="apply-body__form--item">
						<view class="apply-body__form--label required">姓名</view>
						<view class="apply-body__form--input">
							<u--input placeholder="请输入你的姓名" v-model="formData.username"></u--input>
						</view>
					</view>
					<view class="apply-body__form--item">
						<view class="apply-body__form--label required">手机</view>
						<view class="apply-body__form--input">
							<u--input placeholder="请输入你的手机号码" v-model="formData.mobile"></u--input>
						</view>
					</view>
					<view class="apply-body__form--item">
						<view class="apply-body__form--label required">城市</view>
						<view class="apply-body__form--input" @tap="show = true">
							<u--input placeholder="请选择你所在的城市" readonly v-model="formData.area"></u--input>
						</view>
					</view>
				</view>
				<view class="apply-body__submit" v-if="!formData.id">
					<nt-button text="提交申请" @click="submit"></nt-button>
				</view>
			</view>
		</view>
		<u-picker
			:show="show" 
			ref="uPicker" 
			:columns="columns"
			@confirm="confrim"
			@close="show = false" 
			@cancel="show = false" 
			closeOnClickOverlay
		 ></u-picker>
	</nt-container>
</template>

<script>
import { applyMasterWorker, getApplyMasterWorkerDetails } from "@/api"
import { cityConst } from "@/utils/constant"
import { cache } from "@/utils/cache"
export default {
	data() {
		return {
			formData: {
				username: "",
				mobile: "",
				area: ""
			},
			columns: [cityConst],
			show: false
		}
	},
	onLoad(){
		const settleIn = cache.get.settleIn()
		if(settleIn){
			this.formData = settleIn
			this.applyMasterWorkerDetails()
		}
	},
	methods: {
		submit(){
			const { username, mobile, area } = this.formData
			if(!username) return this.toast("请输入你的姓名")
			if(!mobile) {
				return this.toast("请输入你的手机号码")
			}else if(!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(mobile)){
				return this.toast("手机号码格式错误")
			}
			if(!area) return this.toast("请选择你所在的城市")
			applyMasterWorker(this.formData).then(res => {
				if(res.code === 1){
					this.toast("申请提交成功，请等待审核结果")
					cache.set.settleIn(res.data)
					setTimeout(() => this.back(), 1000)
				}
			})
		},
		confrim(e){
			this.formData.area = e.value[0].value
			this.show = false
		},
		// 查询申请状态
		applyMasterWorkerDetails(){
			getApplyMasterWorkerDetails(this.formData.mobile, this.formData.id).then(res => {
				const { code, data } = res
				if(code === 1){
					this.formData = data
				}
			})
		}
		
	}
}
</script>

<style lang="scss" scoped>
.apply{
	padding: 260rpx 30rpx 30rpx;
	box-sizing: border-box;
	&-bg{
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
	}
	&-body{
		padding: 60rpx 30rpx;
		box-sizing: border-box;
		background:#fff;
		position: relative;
		z-index: 1;
		border-radius: 10rpx;
		&__step{
			display:flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 70rpx;
			&--item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color:#333;
				position: relative;
			}
			&--line{
				height: 1rpx;
				background:#f5f5f5;
				top: 20rpx;
				left: 50%;
				width: 100%;
				position: absolute;
				&.active{
					background: var(--theme-color)
				}
			}
			&--circle{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: #DFDFE4;
				position: relative;
				margin-bottom: 20rpx;
				z-index: 4;
				&::after{
					content: "";
					background:#C0C0C9;
					border-radius: 50%;
					width: 25rpx;
					height: 25rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					
				}
				&.active{
					background: #8BBEF7;
					&::after{
						content: "";
						background: var(--theme-color);
					}
				}
			}
		}
		&__form{
			position: relative;
			.disabled{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: 100;
				opacity: 0.5;
				background:#fff;
			}
			&--item{
				display:flex;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				border: 1rpx solid #f5f5f5;
				margin: 20rpx 0;
				padding: 0 20rpx;
				box-sizing: border-box;
				
			}
			&--label{
				width: 140rpx;
				font-size: 32rpx;
				color:#333;
				&.required::after{
					content: "*";
					display: inline-block;
					vertical-align: middle;
					color:#f00;
				}
			}
			&--input{
				flex: 1;
				/deep/ .u-input{
					padding: 0 !important;
					border: none !important;
					height: 90rpx;
				}
			}
		}
		&__submit{
			margin-top: 60rpx;
			/deep/ .button-container{
				border-radius:0;
			}
		}
	}
}
</style>
